<template>
<div class="product">
    <el-image style="width: 100px; height: 100px" :src="productInformation.src"
    fit="fill" @click="getDetail"></el-image>
    <h4 >{{productInformation.productName}}</h4>
      <h5 class="price">{{productInformation.price}}</h5>
  </div>
</template>

<script>
export default {
  name: 'productInformation',
  props: {
        productInformation: {
            src: String,
            productName: String,
            price: Number,
            url: String
        }
    },
    methods : {
        getDetail(){
            this.$router.push(this.productInformation.url)
        }
    }

}
</script>
<style scoped lang="scss">
  .product {
    width: 200px;
    height: 200px;
    padding: 30px;
    border: 1px solid lightpink;
    float: left;
    margin-left:20px;
  }
  .price{
    color:red;
  }
</style>